<template>
  <div>
    <SearchNavBar name="搜索" />
    <!-- <div>{{ query }}</div> -->
    <!-- {{searchStore.searchList.searchList}} -->
    <SearchInput />
  </div>
</template>

<script setup>
import SearchNavBar from "@/pages/Search/SearchNavBar/index.vue";
import SearchInput from "@/pages/Search/SearchInput/index.vue";
import Mock from "mockjs";
import { ref, computed, watch } from "vue";
import { useSearchStore } from "@/store/search";
const searchStore = useSearchStore();
const query = ref("");
const searchData = ref(
  Mock.mock({
    "searchList|200": [
      {
        img: "@Image('100x100','@color','@cname')",
        name: "@cname",
        price: "@num",
        "id|+1": 0,
      },
    ],
  })
);
const searchFilterList = computed(
  () =>
    // searchData.value.searchList &&
    // searchData.value.searchList.filter(
    //   (item, index) =>
    //     true === new RegExp("^.*" + query.value + ".*$").test(item.name)
    // )
    searchStore.searchList.searchList &&
    searchStore.searchList.searchList.filter(
      (item, index) =>
        true === new RegExp("^.*" + query.value + ".*$").test(item.name)
    )
);
const changeQuery = (param) => {
  console.log(param);
  query.value = param;
};
// const count = ref(0)
watch(query, (query, prevQuery) => {
  console.log(query, prevQuery, "---");
  // console.log(searchStore.searchList.searchList, "|||||");
});
</script>

<style>
</style>